<template>
  <div class='container'>
    <a-form
      :model='formState'
      class='container-form'
      layout='inline'
      @keyup.enter.native='handleSearch'
      @keyup.esc.native='handleReset'
    >
      <a-form-item label='流水号'>
        <a-input
          v-model:value='formState.businessId'
          allowClear
          placeholder='请输入'
        />
      </a-form-item>
      <a-form-item label='表具编号'>
        <a-input
          v-model:value='formState.meterId'
          allowClear
          placeholder='请输入'
        />
      </a-form-item>
      <a-form-item>
        <a-space>
          <a-button
            type='primary'
            :loading='searchLoading'
            @click='handleSearch'
          >
            <template #icon>
              <SearchOutlined />
            </template>
            查询
          </a-button>
          <a-button
            :loading='resetLoading'
            @click='handleReset'
          >
            <template #icon>
              <RedoOutlined />
            </template>
            重置
          </a-button>
        </a-space>
      </a-form-item>
    </a-form>

    <a-table
      class='container-table'
      bordered
      rowKey='id'
      :scroll="{ x: 'max-content', y: tableScrollY }"
      :columns='columns'
      :dataSource='dataSource'
      :loading='loading'
      :pagination='pagination'
      @change='tableChange'
    >
      <template #bodyCell='{ column, record }'>
        <template v-if="column.key === 'action'">
          <a-button
            type='link'
            @click='handleImport(record)'
          >
            <template #icon>
              <ImportOutlined />
            </template>
            上传
          </a-button>
        </template>
      </template>
    </a-table>

    <command-import-modal
      ref='importModal'
      :code='activeCode'
      @modalOk='getList'
    />
  </div>
</template>
<script>
import CommandImportModal from './src/commandImportModal'

export default {
  components: { CommandImportModal },
}
</script>

<script setup>
import { useFormSearch, useTableList } from '@/hooks/index.js'

const columns = [
  {
    title: '#',
    align: 'center',
    key: 'index',
    width: 70,
    customRender: row => row.index + 1,
  },
  {
    title: '文件名称',
    align: 'center',
    dataIndex: 'code',
  },
  {
    title: '上传时间',
    align: 'center',
    dataIndex: 'uptime',
  },
  {
    title: '操作',
    align: 'center',
    key: 'action',
    fixed: 'right',
  },
]

const importModal = ref()

const activeCode = ref(null)

const handleImport = (record) => {
  activeCode.value = record.code
  importModal.value.handleImport()
}
const { loading, dataSource, pagination, tableScrollY, getList, tableChange } = useTableList('/conn/page')
const { formState, searchLoading, resetLoading, handleSearch, handleReset } = useFormSearch(
  { businessId: '', meterId: '' },
  getList,
)
getList()
</script>
<style scoped lang='scss'></style>
